<template>
  <view class="container">
    <view class="user_back">
      <view class="exitBox">
        <!-- 使用uni-icons替代缺失的SVG图标 -->
        <uni-icons
          type="redo-filled"
          size="30"
          class="exit_icon"
          @click="exit()"
        ></uni-icons>
      </view>

      <view class="userBox">
        <!-- 用户头像 -->
        <image
          :src="userInfo.avatar ? baseURL + userInfo.avatar : defaultAvatar"
          class="user_avatar"
        ></image>

        <view class="user_info">
          <view class="user_name">
            {{ userInfo.nickname || "未设置昵称" }}
          </view>
          <view class="user_account">
            账号：{{ userInfo.username || "未知" }}
          </view>
        </view>
      </view>

      <view class="userCollect">
        <view class="userCollect_title">
          <view class="userCollect_title_num">
            {{ collectCount >= 0 ? collectCount : 0 }}
          </view>
          <view class="userCollect_title_text"> 收藏 </view>
        </view>

        <view class="userCollect_title" @click="goToOrder">
          <view class="userCollect_title_num">
            {{ orderCount >= 0 ? orderCount : 0 }}
          </view>
          <view class="userCollect_title_text"> 订单 </view>
        </view>
      </view>
    </view>

    <view class="user_order_box">
      <view class="user_order_title_box" @click="goToOrderWithStatus('0')">
        <image
          :src="imageUrls.orderAll"
          class="user_order_img"
        ></image>
        <view class="user_order_title"> 全部 </view>
      </view>

      <view class="user_order_title_box" @click="goToOrderWithStatus('1')">
        <image
          :src="imageUrls.orderPendingPayment"
          class="user_order_img"
        ></image>
        <view class="user_order_title"> 待付款 </view>
      </view>

      <view class="user_order_title_box" @click="goToOrderWithStatus('2')">
        <image
          :src="imageUrls.orderPendingUse"
          class="user_order_img"
        ></image>
        <view class="user_order_title"> 待使用 </view>
      </view>

      <view class="user_order_title_box" @click="goToOrderWithStatus('3')">
        <image
          :src="imageUrls.orderUsed"
          class="user_order_img"
        ></image>
        <view class="user_order_title"> 已使用 </view>
      </view>

      <view class="user_order_title_box" @click="goToOrderWithStatus('4')">
        <image
          :src="imageUrls.orderCancelled"
          class="user_order_img"
        ></image>
        <view class="user_order_title"> 已取消 </view>
      </view>
    </view>

    <view class="tollBox">
      <view class="tool_text">
        <view class="tool_text_title"> 常用工具 </view>
      </view>

      <view class="toll_content">
        <view class="user_order_title_box">
          <image
            :src="imageUrls.leaderboard"
            class="user_order_img"
          ></image>
          <view class="user_order_title"> 排行榜 </view>
        </view>
        <view class="user_order_title_box">
          <image
            :src="imageUrls.points"
            class="user_order_img"
          ></image>
          <view class="user_order_title"> 积分明细 </view>
        </view>
        <view class="user_order_title_box">
          <image
            :src="imageUrls.signupRecord"
            class="user_order_img"
          ></image>
          <view class="user_order_title"> 报名记录 </view>
        </view>
        <view class="user_order_title_box">
          <image
            :src="imageUrls.exchangeRecord"
            class="user_order_img"
          ></image>
          <view class="user_order_title"> 兑换记录 </view>
        </view>
      </view>

      <view class="toll_content_info">
        <view class="user_order_title_box">
          <image
            :src="imageUrls.editInfo"
            class="user_order_img"
          ></image>
          <view class="user_order_title"> 修改信息 </view>
        </view>

        <view class="user_order_title_box improve">
          <image
            :src="imageUrls.improveInfo"
            class="user_order_img"
          ></image>
          <view class="user_order_title"> 完善信息 </view>
        </view>
      </view>
    </view>

    <view class="recommend_box">
      <view class="tool_text">
        <view class="tool_text_title"> 热门推荐 </view>
      </view>

      <view class="recommend_list">
        <image
          :src="imageUrls.recommend1"
          class="recommend_img"
        ></image>
        <image
          :src="imageUrls.recommend2"
          class="recommend_img"
        ></image>
      </view>
    </view>

    <!-- 自定义弹窗 -->
    <view v-if="showModal" class="custom-modal">
      <view class="custom-modal-mask" @click="cancelOrder"></view>
      <view class="custom-modal-content">
        <view class="custom-modal-header">
          <view class="custom-modal-title">提示</view>
        </view>
        <view class="custom-modal-body"> 您是否确定退出登录？ </view>
        <view class="custom-modal-footer">
          <view class="custom-modal-button cancel" @click="cancelOrder"
            >取消</view
          >
          <view class="custom-modal-button confirm" @click="confirmOrder"
            >确定</view
          >
        </view>
      </view>
    </view>
    <view style="width: 100%; height: 100rpx"></view>
  </view>
</template>

<script>
import config from "@/static/config.js";
import { userAPI, orderAPI } from "@/static/indexAPI.js";
import uniIcons from "@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue";

export default {
  components: {
    uniIcons,
  },
  data() {
    return {
      userInfo: {},
      collectCount: 0,
      orderCount: 0,
      showModal: false,
      baseURL: "", // 从config中获取的基础URL
      defaultAvatar: config.imgUrl + "/img/img20841118b286f4de8.png", // 默认头像
      // 图片URL列表
      imageUrls: {
        orderAll: config.imgUrl + "/img/img8972418c9e9dcd18.png",
        orderPendingPayment: config.imgUrl + "/img/img8977018c9ea64ce0.png",
        orderPendingUse: config.imgUrl + "/img/img8973518c9e9f2ca8.png",
        orderUsed: config.imgUrl + "/img/img8973318c9e9f1150.png",
        orderCancelled: config.imgUrl + "/img/img8972618c9e9e8898.png",
        leaderboard: config.imgUrl + "/img/img8979218c9eaae4a8.png",
        points: config.imgUrl + "/img/img8980418c9eac1558.png",
        signupRecord: config.imgUrl + "/img/img8980318c9eabf618.png",
        exchangeRecord: config.imgUrl + "/img/img8979818c9eab7918.png",
        editInfo: config.imgUrl + "/img/img8979518c9eab4e20.png",
        improveInfo: config.imgUrl + "/img/img8979218c9eaae4a8.png",
        recommend1: config.imgUrl + "/img/img8988118c9ec5b7d8.png",
        recommend2: config.imgUrl + "/img/img8992018c9eca4fa0.png"
      }
    };
  },

  onLoad() {
    // 设置baseURL
    this.baseURL = config.baseURL;

    // 获取用户信息
    this.loadUserInfo();
  },
  onShow() {
    // 每次显示页面时都刷新数据
    this.loadUserInfo();
    this.loadCollectCount();
    this.loadOrderCount();
  },
  methods: {
    loadUserInfo() {
      try {
        const userinfo = uni.getStorageSync("userinfo");
        if (userinfo) {
          this.userInfo = userinfo;
        }
      } catch (error) {
        console.error("获取用户信息失败:", error);
      }
    },

    loadCollectCount() {
      const userId = uni.getStorageSync("userId");
      if (!userId) return;

      userAPI
        .getMyCollect({
          userid: userId,
        })
        .then((res) => {
          if (res.data && res.data.data) {
            this.collectCount = res.data.data.length;
          }
        })
        .catch((err) => {
          console.error("获取收藏数据失败:", err);
        });
    },

    loadOrderCount() {
  const userId = uni.getStorageSync("userId");
  const token = uni.getStorageSync("token");
  if (!userId || !token) {
    console.log("缺少userId或token，无法获取订单数量");
    return;
  }

  orderAPI
    .getOrderList({ uid: userId }, token, userId)
    .then((res) => {
      console.log("订单接口返回数据:", res);
      if (res.data && res.data.code === 1 && res.data.data) {
        this.orderCount = Array.isArray(res.data.data)
          ? res.data.data.length
          : 0;
        console.log("订单数量更新为:", this.orderCount);
      } else {
        console.log("订单数据格式不正确或无数据");
        this.orderCount = 0;
      }
    })
    .catch((err) => {
      console.error("获取订单数据失败:", err);
      this.orderCount = 0;
    });
},

    // ====== 退出登录 ======
    exit() {
      this.showModal = true;
    },

    // 取消按钮点击事件，关闭弹窗
    cancelOrder() {
      this.showModal = false;
    },

    // 确定按钮点击事件，保留hasShownGuide并清除其余本地存储，跳转到登录页
    confirmOrder() {
      // 1. 获取所有本地存储的key
      try {
        const storageInfo = uni.getStorageInfoSync();
        const allKeys = storageInfo.keys;

        // 2. 遍历key，仅保留hasShownGuide，删除其余存储
        allKeys.forEach((key) => {
          if (key !== "hasShownGuide") {
            uni.removeStorageSync(key);
          }
        });
      } catch (e) {
        console.error("清理存储失败:", e);
      }

      // 3. 关闭弹窗并跳转登录页
      this.showModal = false;
      uni.redirectTo({
        url: "/pages/login/login",
      });
    },

    goToOrder() {
      uni.navigateTo({
        url: "/pages/order/order",
      });
    },

    goToOrderWithStatus(status) {
      uni.navigateTo({
        url: `/pages/order/order?status=${status}`,
      });
    },
  },
};
</script>

<style scoped>
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-top: 18%;
}

.user_back {
  width: 100%;
  height: 240px;
  background-image: url(https://img.xiaopiu.com/userImages/img8964118c9e889f38.jpg);
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  flex-direction: column;
}

.exitBox {
  width: 92%;
  height: 40px;
  margin-left: 2.5%;
  padding-top: 4%;
  display: flex;
  justify-content: flex-end;
  z-index: 10;
}

.exit_icon {
  width: 30px;
  height: 30px;
  margin-left: auto;
  color: #333;
  /* background-color: rgba(255, 255, 255, 0.7); */
  border-radius: 50%;
  padding: 5px;
}

.userBox {
  width: 92%;
  height: 75px;
  margin-left: 4%;
  display: flex;
  align-items: center;
}

.user_avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  /* border: 2px solid white; */
  object-fit: cover;
  /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); */
}

.user_info {
  margin-left: 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.user_name {
  font-size: 18px;
  font-weight: bold;
}

.user_account {
  font-size: 14px;
  margin-top: 2%;
  opacity: 0.9;
}

.userCollect {
  width: 100%;
  height: 50px;
  display: flex;
  margin-top: 3%;
}

.userCollect_title {
  width: 20%;
  height: 50px;
  text-align: center;
  margin-top: 2%;
}

.userCollect_title_num {
  font-size: 18px;
  font-weight: bold;
  line-height: 25px;
}

.userCollect_title_text {
  font-size: 14px;
  opacity: 0.9;
}

.user_order_box {
  width: 95%;
  height: 80px;
  margin-top: -8%;
  margin-left: 2.5%;
  border-radius: 5px;
  display: flex;
  position: relative;
  justify-content: space-between;
  background-color: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.user_order_title_box {
  width: 20%;
  height: 80px;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.user_order_title {
  font-size: 14px;
  color: rgba(80, 80, 80, 1);
  margin-top: 5px;
}

.user_order_img {
  width: 30px;
  height: 30px;
}

.tollBox {
  width: 95%;
  height: auto;
  margin-top: 20rpx;
  margin-left: 2.5%;
  border-radius: 5px;
  background-color: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  padding: 10px 0;
}

.tool_text {
  width: 100%;
  height: 30px;
  color: rgba(80, 80, 80, 1);
  font-size: 16px;
  text-indent: 10px;
  line-height: 15px;
}

.tool_text_title {
  color: rgba(80, 80, 80, 1);
  font-size: 16px;
  text-indent: 10px;
  line-height: 40px;
  font-weight: bold;
}

.toll_content {
  width: 100%;
  height: 80px;
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  box-sizing: border-box;
}

.toll_content_info {
  width: 100%;
  height: 80px;
  display: flex;
  padding: 0 10px;
  box-sizing: border-box;
  margin-top: 10px;
}

.improve {
  margin-left: 7%;
}

.recommend_box {
  width: 95%;
  height: auto;
  margin-top: 20rpx;
  margin-left: 2.5%;
  background-color: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  padding: 10px;
  box-sizing: border-box;
}

.recommend_list {
  width: 100%;
  height: 260px;
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.recommend_img {
  width: 48%;
  height: 250px;
  border-radius: 5px;
  object-fit: cover;
}

/* 弹窗样式 */
.custom-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.custom-modal-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.custom-modal-content {
  position: relative;
  width: 280px;
  background-color: white;
  border-radius: 10px;
  z-index: 2;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.custom-modal-header {
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
}

.custom-modal-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.custom-modal-body {
  padding: 20px;
  font-size: 16px;
  color: #666;
  text-align: center;
}

.custom-modal-footer {
  display: flex;
  border-top: 1px solid #eee;
}

.custom-modal-button {
  flex: 1;
  padding: 15px 0;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.custom-modal-button.cancel {
  color: #999;
  border-right: 1px solid #eee;
}

.custom-modal-button.cancel:active {
  background-color: #f5f5f5;
}

.custom-modal-button.confirm {
  color: #007aff;
  font-weight: bold;
}

.custom-modal-button.confirm:active {
  background-color: #f0f7ff;
}
</style>
